<template>
    <div class="app-select-button" :class="showactive ? 'app-select-button-active' : ''" @click.stop="clickbutton">
        <div class="button">
            <img v-if="buttonType == 'ChroBrowser' && buttonType != data.type" src="@/assets/home/chro.png" alt="">
            <img v-if="buttonType == 'ChroBrowser' && buttonType == data.type" src="@/assets/home/chro_hover.png"
                alt="">
            <img v-if="buttonType == 'FireBrowser' && buttonType != data.type" src="@/assets/home/firefox.png" alt="">
            <img v-if="buttonType == 'FireBrowser' && buttonType == data.type" src="@/assets/home/firefox_hover.png"
                alt="">
            <div style="margin-left: 8px;">{{ formdata.name }}</div>
        </div>
        <el-dropdown placement="bottom-end" popper-class="select-button-dropdown" trigger="click">
            <div style="width: 25px;border-left: 1px solid #d9d9d9;display: flex;justify-content: flex-end;">
                <img src="@/assets/home/down.png" style="width: 16px;height: 16px" alt="">
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <!-- <el-dropdown-item @click="clickDropdown('-1')"
                        :class="data.version == '-1' ? 'dropdown-item_active' : ''">智能匹配</el-dropdown-item> -->
                    <el-dropdown-item @click="clickDropdown(item)" v-for="item in optios"
                        :class="data.version == item.value ? 'dropdown-item_active' : ''" class="dropdown_item">
                        <div v-if="item.value != -1"
                            style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                            <div>{{ item.label }}</div>
                            <div class="download_img" @click.stop="clickDownload(item)" v-if="item.path == ''"></div>
                        </div>
                        <div v-else>{{ item.label }}</div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { downloadCore } from '@/utils/downloadCore'
const props = defineProps({
    buttonType: String,
    data: Object,
    optios: Array,
    formData: Object
})


const showactive = computed(() => {
    let a = false
    if (props.buttonType == props.data.type) {
        a = true
    }
    formdata.value = JSON.parse(JSON.stringify(browserMap.value[props.buttonType]))
    return a
})

const formdata = ref({
    type: 'ChroBrowser',
    name: 'ChroBrowser',
    version: '-1'
})

const browserMap = ref({
    ChroBrowser: {
        type: 'ChroBrowser',
        name: 'ChroBrowser',
        version: '-1'
    },
    FireBrowser: {
        type: 'FireBrowser',
        name: 'FireBrowser',
        version: '-1'
    },
})


const clickbutton = () => {
    if (props.data.type != props.buttonType) {
        props.data.type = formdata.value.type
        props.data.name = formdata.value.name
        props.data.version = formdata.value.version

        props.formData.base.operate = 'Windows'
    }



}

const clickDropdown = (row) => {
    props.data.version = row.value
    let str = ''
    if (props.data.type == 'ChroBrowser') {
        str = 'ChroBrowser'
    } else if (props.data.type == 'FireBrowser') {
        str = 'FireBrowser'
    }
    if (row.value != '-1') {
        str += ` ${props.data.version}`
    }
    props.data.name = str
    formdata.value.name = str
}

const clickDownload = (row) => {
    let a = {
        type: props.buttonType,
        version: row.value
    }
    downloadCore(a)
}
</script>

<style lang="scss" scoped>
.app-select-button {
    width: 200px;
    height: 32px;
    padding: 0 12px;
    color: #1d2129;
    font-size: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    display: flex;
    align-items: center;

    justify-content: space-between;
    cursor: pointer;
}

.app-select-button:hover {
    color: #3569fd;
}

.app-select-button-active {
    border: 1px solid #3569fd;
    color: #3569fd;
}

.button {
    display: flex;
    align-items: center;

    img {
        width: 16px;
        height: 16px
    }

}

.download_img {
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: url('@/assets/home/download.png');
    background-size: cover;
}

.dropdown_item:hover {
    .download_img {
        background: url('@/assets/home/download_hover.png');
        background-size: cover;
    }
}
</style>

<style>
.select-button-dropdown {
    width: 180px;
}

.select-button-dropdown .el-popper__arrow::before {
    display: none;
}

.dropdown-item_active {
    background-color: rgb(236.6, 246.7, 255);
    color: #000;
}
</style>